<template>
  <div class="choice-container">
    <div class="app-container">
      <el-card style="padding-right:10px">
        <div class="addQuestion">
          <el-button @click="toAdd" type="success" size="small" icon="el-icon-edit" style="float:right">新增试题</el-button>
        </div>

        <el-form
          :model="reqParams"
          ref="reqParams"
          style="padding-top:50px"
          label-width="100px"
          size="small"
        >
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="学科">
                  <el-select
                    @change="getOthers"
                    @focus="getSubjects()"
                    v-model="reqParams.subjectID"
                    placeholder="请选择"
                    style="width: 100%;"
                  >
                    <el-option
                      v-for="item in subjects"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="试题类型">
                  <el-select
                    v-model="reqParams.questionType"
                    placeholder="请选择"
                    style="width: 100%;"
                  >
                    <el-option label="单选" :value="1"></el-option>
                    <el-option label="多选" :value="2"></el-option>
                    <el-option label="简答" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="题目备注">
                  <el-input v-model="reqParams.remarks" placeholder="请选择" style="width: 100%;">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="二级目录">
                  <el-select v-model="reqParams.catalogID" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="item in catalogs"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="难度">
                  <el-select v-model="reqParams.difficulty" placeholder="请选择" style="width: 100%;">
                    <el-option label="简单" :value="1"></el-option>
                    <el-option label="一般" :value="2"></el-option>
                    <el-option label="困难" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="企业简称">
                  <el-input v-model="reqParams.shortName" placeholder="请选择" style="width: 100%;">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="标签">
                  <el-select v-model="reqParams.tags" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="item in tags"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="方向">
                  <el-select v-model="reqParams.direction" placeholder="请选择" style="width: 100%;">
                    <el-option label="o2o" value="o2o"></el-option>
                    <el-option label="外包服务" value="外包服务"></el-option>
                    <el-option label="企业服务" value="企业服务"></el-option>
                    <el-option label="互联网金融" value="互联网金融"></el-option>
                    <el-option label="企业咨询" value="企业咨询"></el-option>
                    <el-option label="互联网" value="互联网"></el-option>
                    <el-option label="电子商务" value="电子商务"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="城市">
                  <el-row>
                    <el-col :span="12">
                      <el-select
                        v-model="reqParams.province"
                        @focus="getProvince"
                        @change="getCities"
                        placeholder="请选择"
                        style="margin-right:10px"
                      >
                        <el-option
                          v-for="item in provinces"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="12">
                      <el-select v-model="reqParams.city" placeholder="请选择">
                        <el-option v-for="item in cities" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="关键字">
                  <el-input v-model="reqParams.keyword" placeholder="请选择" style="width: 100%;">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-input>
                </el-form-item>
                <el-form-item label="录入人">
                  <el-select
                    @focus="getUsers()"
                    v-model="reqParams.creatorID"
                    placeholder="请选择"
                    style="width: 100%;"
                  >
                    <el-option
                      v-for="item in users"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <div class="formBtn" style="float:right">
                    <el-button @click="clearAll">清空</el-button>
                    <el-button @click="submitData" type="primary">提交</el-button>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>

        <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="unchecked"></el-tab-pane>
          <el-tab-pane label="已审核" name="checked"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="refused"></el-tab-pane>
        </el-tabs>

        <el-alert
          v-if="totalAlert != ''"
          :title="totalAlert"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom:15px"
        ></el-alert>

        <template>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
            <el-table-column label="学科" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.subject}}</span>
              </template>
            </el-table-column>
            <el-table-column label="目录" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.catalog}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="100">
              <template slot-scope="scope">
                <p v-if="scope.row.questionType == 1">单选</p>
                <p v-if="scope.row.questionType == 2">多选</p>
                <p v-if="scope.row.questionType == 3">简答</p>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question">{{scope.row.question}}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="200">
              <template slot-scope="scope">
                <span>{{scope.row.addDate | parseTimeByString()}}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度" width="100">
              <template slot-scope="scope">
                <p v-if="scope.row.difficulty == 1">简单</p>
                <p v-if="scope.row.difficulty == 2">一般</p>
                <p v-if="scope.row.difficulty == 3">困难</p>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="150"></el-table-column>
            <el-table-column label="审核状态" width="100">
              <template slot-scope="scope">
                <p v-if="scope.row.chkState == 0">待审核</p>
                <p v-if="scope.row.chkState == 1">已审核</p>
                <p v-if="scope.row.chkState == 2">已拒绝</p>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="200"></el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="100">
              <template slot-scope="scope">
                <p v-if="scope.row.publishState == 1">已上架</p>
                <p v-else>已下架</p>
              </template>
            </el-table-column>

            <!-- 操作栏 -->
            <el-table-column fixed="right" prop="id" label="操作" width="200" header-align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small">预览</el-button>
                <el-button
                  @click="readToCheck(scope.row.id)"
                  :disabled="scope.row.chkState != 0"
                  type="text"
                  size="small"
                >审核</el-button>
                <el-button
                  @click="toEdit(scope.row.id)"
                  :disabled="scope.row.publishState == 1"
                  type="text"
                  size="small"
                >修改</el-button>
                <el-button type="text" size="small">
                  <p @click="handelDown(scope.row.id)" v-if="scope.row.publishState == 1">下架</p>
                  <p @click="handelUp(scope.row.id)" v-else>上架</p>
                </el-button>
                <el-button
                  @click="delChoice(scope.row.id)"
                  :disabled="scope.row.publishState == 1"
                  type="text"
                  size="small"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!-- 分页 -->
        <el-pagination
          @size-change="sizeChanger"
          @current-change="pageChanger"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="reqParams.pagesize"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          style="margin:20px 0;float:right"
        ></el-pagination>

        <!-- 审核弹窗 -->
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="25%" center>
          <el-radio v-model="optionsParams.chkState" :label="1">通过</el-radio>
          <el-radio v-model="optionsParams.chkState" :label="2">拒绝</el-radio>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
            v-model="optionsParams.chkRemarks"
            style="margin-top:20px"
          ></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="toCheck">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from "@/api/hmmm/subjects";
import { simple as directoryList } from "@/api/hmmm/directorys";
import { simple as tagsList } from "@/api/hmmm/tags";
import { simple as usersList } from "@/api/base/users";
import { provinces, citys } from "@/api/hmmm/citys.js";
import {
  choice,
  choicePublish,
  choiceCheck,
  choiceAdd
} from "@/api/hmmm/questions";
export default {
  name: "questionChoice-page",
  data() {
    return {
      centerDialogVisible: false,
      totalAlert: '',
      reqParams: {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        chkState: null,
        page: 1,
        pagesize: 5
      },
      optionsParams: {
        id: null,
        publishState: null,
        chkState: 1,
        chkRemarks: null,
        choiceState: 0
      },
      activeName: "all",
      subjects: [],
      catalogs: [],
      tags: [],
      users: [],
      provinces: [],
      cities: [],
      tableData: [],
      total: null
    };
  },
  created() {
    this.getChoiceData();
  },
  methods: {
    toAdd() {
      this.$router.push({path: 'new'})
    },
    tabClick() {
      switch (this.activeName) {
        case 'all':
          this.reqParams.chkState = null
          break; 
        case 'unchecked':
          this.reqParams.chkState = 0
          break; 
        case 'checked':
          this.reqParams.chkState = 1
          break; 
        case 'refused':
          this.reqParams.chkState = 2
          break; 
      }
      this.getChoiceData();
    },
    sizeChanger(newSize) {
      this.reqParams.pagesize = newSize;
      this.getChoiceData();
    },
    pageChanger(newPage) {
      this.reqParams.page = newPage;
      this.getChoiceData();
    },
    delChoice(id) {
      this.optionsParams.id = id;
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          choiceAdd(this.optionsParams);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getChoiceData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    toEdit(id) {
      this.$router.push({ path: "new", query: { id } });
    },
    readToCheck(id) {
      this.optionsParams.id = id;
      this.centerDialogVisible = true;
    },
    async toCheck() {
      const res = await choiceCheck(this.optionsParams);
      this.centerDialogVisible = false;
      this.$message.success("操作成功");
      this.getChoiceData();
    },
    handelUp(id) {
      this.$confirm("此操作将上架该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.optionsParams.id = id;
          this.optionsParams.publishState = 1;
          await choicePublish(this.optionsParams);
          this.$message({
            type: "success",
            message: "上架成功!"
          });
          this.getChoiceData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上架"
          });
        });
    },
    handelDown(id) {
      this.$confirm("此操作将下架该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.optionsParams.id = id;
          this.optionsParams.publishState = 0;
          await choicePublish(this.optionsParams);
          this.$message({
            type: "success",
            message: "下架成功!"
          });
          this.getChoiceData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下架"
          });
        });
    },
    submitData() {
      this.getChoiceData();
    },
    async getChoiceData() {
      const res = await choice(this.reqParams);
      this.tableData = res.data.items;
      this.total = res.data.counts;
      this.totalAlert = `共有数据 ${this.total} 条`
    },
    clearAll() {
      this.reqParams = {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        chkState: null
      };
      this.getChoiceData();
    },
    async getProvince() {
      this.provinces = await provinces();
    },
    async getCities(pname) {
      this.cities = await citys(pname);
      this.reqParams.city = this.cities[0];
    },
    async getUsers() {
      const res = await usersList();
      this.users = res.data;
    },
    async getOthers(id) {
      const res = await directoryList({ subjectID: id });
      const res1 = await tagsList({ subjectID: id });
      this.catalogs = res.data;
      this.tags = res1.data;
    },
    async getSubjects() {
      const res = await simple();
      this.subjects = res.data;
    }
  }
};
</script>

<style scoped lang='less'></style>
